<template>
  <!-- 给左侧添加collapse属性控制导航折叠 -->
    <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        :collapse="store.state.homeview.navBool"
        router
      >
      <!-- 添加router属性，就是element根据列表的index属性当成页面跳转路径 -->
      <!-- 带下拉的导航 -->
        <template v-for="(v,i) in router.options.routes[2].children" :key="'u'+v.path">
          <!-- 添加index熟悉作为路径 -->
          <el-sub-menu :index="v.path" v-if="v.children">
            <template #title>
              <el-icon><location /></el-icon>
              <!-- 添加展示数据 -->
              <span>{{((v.meta as any).title ) }}</span>
            </template>
            <el-menu-item-group v-for="(val,index) in v.children" :key="'user'+val.path">
              <el-menu-item :index="val.path">{{(val.meta as any).title}}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        <!-- 不带下拉的列表 -->
          <el-menu-item :index="v.path" v-else>
            <el-icon><setting /></el-icon>
            <span>{{(v.meta as any).title}}</span>
          </el-menu-item>
        </template>
    </el-menu>
</template>

<script setup lang="ts">
// elementPlus
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
// 获取路由信息
const router = useRouter()

const store = useStore()
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// 获取路由信息
onMounted(()=>{
  // 获取所有路由信息
  console.log(router.options.routes)
})
</script>

<style scoped>


</style>